<script setup lang="ts">
const data = ref({
  type: 1,
})
</script>

<template>
  <view class="rounded-lg bg-white">
    <view class="px-[15px] py-[10px]">
      <wd-text text="点餐功能设置" size="14px" color="#333" />
    </view>
    <wd-cell-group border>
      <wd-cell title="功能设置" center title-width="20%">
        <view>
          <wd-radio-group v-model="data.type" shape="button" size="small">
            <wd-radio :value="1">点餐+支付</wd-radio>
            <wd-radio :value="2">支付</wd-radio>
            <wd-radio :value="3">点餐</wd-radio>
          </wd-radio-group>
          <wd-text text="顾客使用扫码点餐下单，支持线上支付，不需要找店员结账" size="9px" />
        </view>
      </wd-cell>
      <template v-if="data.type === 1">
        <custom-wd-input-single-select
          label="支付模式"
          placeholder="请选择"
          placeholder-class="text-align-right"
          custom-input-class="text-align-right"
        />
        <wd-cell title="后付下单验证" is-link center title-width="30%">
          <view class="inline-flex flex-col">
            <wd-text text="距离限制" size="14px" color="#333" />
            <wd-text text="2000米限制，随机验证码验证" size="12px" />
          </view>
        </wd-cell>
        <wd-cell title="支付后提醒">
          <wd-switch size="20px" />
        </wd-cell>
        <wd-cell title="接单方式" is-link center title-width="30%">
          <view class="inline-flex flex-col">
            <wd-text text="手动接单" size="14px" color="#333" />
            <wd-text text="需要在银POS上手动进行接单" size="12px" />
          </view>
        </wd-cell>
        <wd-cell title="结账方式" is-link center title-width="20%">
          <view class="inline-flex flex-col">
            <wd-text text="手动结账" size="14px" color="#333" />
            <wd-text text="顾客付款后，需要店员在收银POS手动结账" size="12px" />
          </view>
        </wd-cell>
        <wd-cell title="先下单锅底（适合火锅店）">
          <wd-switch size="20px" />
        </wd-cell>
        <wd-cell title="下单时选择上餐方式" class="no-leading" title-width="70%">
          <wd-switch size="20px" />
          <template #label>
            <wd-text text="开启后，用户下单时可选择立即制作上菜或等待通知再制作" size="12px" />
          </template>
        </wd-cell>
        <wd-cell title="通知立即制作" class="no-leading" title-width="70%">
          <wd-switch size="20px" />
          <template #label>
            <wd-text text="开启后，用户可选择尚未制作的菜品，通知后厨立即制作上菜。" size="12px" />
          </template>
        </wd-cell>
      </template>
      <template v-if="data.type === 2">
        <wd-cell title="结账方式" is-link center title-width="20%">
          <view class="inline-flex flex-col">
            <wd-text text="手动结账" size="14px" color="#333" />
            <wd-text text="顾客付款后，需要店员在收银POS手动结账" size="12px" />
          </view>
        </wd-cell>
      </template>
      <template v-if="data.type === 3">
        <wd-cell title="后付下单验证" is-link center title-width="40%">
          <view class="inline-flex flex-col">
            <wd-text text="距离限制" size="14px" color="#333" />
            <wd-text text="2000米限制，随机验证码验证" size="12px" />
          </view>
        </wd-cell>
        <wd-cell title="接单方式" is-link center title-width="40%">
          <view class="inline-flex flex-col">
            <wd-text text="手动接单" size="14px" color="#333" />
            <wd-text text="需要在银POS上手动进行接单" size="12px" />
          </view>
        </wd-cell>
        <wd-cell title="先下单锅底（适合火锅店）">
          <wd-switch size="20px" />
        </wd-cell>
        <wd-cell title="下单时选择上餐方式" class="no-leading" title-width="70%">
          <wd-switch size="20px" />
          <template #label>
            <wd-text text="开启后，用户下单时可选择立即制作上菜或等待通知再制作" size="12px" />
          </template>
        </wd-cell>
        <wd-cell title="通知立即制作" class="no-leading" title-width="70%">
          <wd-switch size="20px" />
          <template #label>
            <wd-text text="开启后，用户可选择尚未制作的菜品，通知后厨立即制作上菜。" size="12px" />
          </template>
        </wd-cell>
      </template>
    </wd-cell-group>
  </view>
</template>

<style scoped lang="scss">
:deep(.no-leading.wd-cell) {
  line-height: 18px;
}
</style>
